<template>
	<view>
		<u-popup :show="show" @close="closeProgress()" mode="bottom" :closeOnClickOverlay="false" round="10" closeable>
			<view style="padding: 15px;">
				<u--text text="文件上传中请勿关闭页面" align="center"></u--text>
				<view style="margin: 10px 0;" v-for="(item,index) in list">
					<u--text :text="item.name" align="right"></u--text>
					<view v-if="!item.success">
						<u-line-progress :percentage="item.progress" activeColor="#ff0000"
							style="margin-top: 5px;"></u-line-progress>
					</view>
					<view v-else
						style="display: flex;align-items: center;justify-content: space-between;margin-top: 5px;">
						<p>上传成功</p>
						<u-icon name="checkmark-circle-fill" color="#19be6b" size="28"></u-icon>
					</view>
				</view>
				<u-loading-icon v-show="loading" style="margin-top: 10px;" text="文件上传中" mode="circle"
					textSize="14"></u-loading-icon>
				<u-alert title="小技巧" type="info" description="由于没有进度通知,上传进度可以看手机状态栏的网速变化来估计哦~" style="margin: 10px 0;"></u-alert>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				required: true,
				default: false
			},
			loading: {
				type: Boolean,
				required: true,
				default: false
			},
			list: {
				type: Array,
				required: true,
				default: []
			}
		},
		name: "UploadProgress",
		methods: {
			closeProgress() {
				this.$emit("close")
			}
		}
	}
</script>

<style>
	.ad {
		width: 100%;
		margin-top: 10px;
		height: 40px;
		border-radius: 10px;
	}
</style>